<%--
  Created by IntelliJ IDEA.
  User: Elle
  Date: 2022/7/7
  Time: 9:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>使用js实现ajax</title>
  </head>
  <body>

  点赞：<span id="zan">10</span><br/>
  <button onclick="zan()">赞</button>

  <script>

    function zan() {
      //1、创建对象
      var xmlHttpRequest = new XMLHttpRequest();
      //2、设置回调函数
      xmlHttpRequest.onreadystatechange=function(){
        var readyState = xmlHttpRequest.readyState;
        var status = xmlHttpRequest.status;
        console.log(readyState+" "+status);
        if(readyState==4 && status==200){
          //操作成功
          var zan = document.getElementById("zan");
          zan.innerText = parseInt(zan.innerText)+1;  //局部刷新

          var ret = xmlHttpRequest.responseText;
          console.log(ret);
        }
      };
      //3、初始化组件==》参数
      xmlHttpRequest.open("get","ZanServlet?cnt=1",true);
      //4发送
      xmlHttpRequest.send(null);
    }

    function get(url,success){
      //1、创建对象
      var xmlHttpRequest = new XMLHttpRequest();
      //2、设置回调函数
      xmlHttpRequest.onreadystatechange=function(){
        var readyState = xmlHttpRequest.readyState;
        var status = xmlHttpRequest.status;
        console.log(readyState+" "+status);
        if(readyState==4 && status==200){
          //操作成功
          success;
        }
      };
      //3、初始化组件==》参数
      xmlHttpRequest.open("get",url,true);
      //4发送
      xmlHttpRequest.send(null);
    }
  </script>

  </body>
</html>
